<template>
  <h2 id="h">
    <!-- 生命周期 -->

    <!-- 计算属性 -->
    <input v-model="state.num" type="text" />
    <p>
      {{ state.num }}
    </p>
    <input v-model="state.count" type="text" />
    <p>
      {{ state.count }}
    </p>
    <!-- <p>
          {{ state.nums }}
      </p> -->

    <!-- 监听 -->
  </h2>
</template>

<script>
import {
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  computed,
  reactive,
  watch,
  watchEffect,
} from "@vue/runtime-core";
export default {
  // setup 代替  beforeCreate  created
  setup() {
    // onMounted(() => {
    //     console.log(document.getElementById('h'))
    // })

    // 计算属性
    const state = reactive({
      num: 100,
      count: 200,
      nums: computed(() => state.num + "----"),
    });

    // watch(fn, 改变后执行的回调)
    // 监听单个
    // watch(() => state.num, (newValue, oldValue) => {
    //     console.log(newValue, oldValue)
    // })

    // 监听多个
    //  watch([() => state.num, () => state.count], (newValue, oldValue) => {
    //      console.log(newValue, oldValue)
    //  })

    // 深度监听
    // watch(state, (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // });

    // 1.首次进来就执行 
    // 2. 收集依赖
    watchEffect(() => {
        // console.log(state.num)
        // state.num += '123'
    })

    return {
      state
    }
  }
};
</script>

<style>
</style>